/*
 * @Description:
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2024-02-08 12:56:45
 * @LastEditTime: 2024-09-03 21:42:15
 */
import { ref, reactive } from "../utils/vue.esm.js"
const template = /*html*/ `
    <div class="search-icon" @click="bindShowSearchModule">
        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z"></path></svg>
    </div>
    <div v-if="flag" class="search-window" :style="windowStyle">
        <form class="search-form" role="search" method="get" action="/">
            <input type="text" name="s" placeholder="请输入关键字...">
            <button type="submit">
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z"></path></svg>
            </button>
        </form>
        <div class="close-search" @click="bindShowSearchModule">
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M550.848 502.496l308.64-308.896a31.968 31.968 0 1 0-45.248-45.248l-308.608 308.896-308.64-308.928a31.968 31.968 0 1 0-45.248 45.248l308.64 308.896-308.64 308.896a31.968 31.968 0 1 0 45.248 45.248l308.64-308.896 308.608 308.896a31.968 31.968 0 1 0 45.248-45.248l-308.64-308.864z"></path></svg>
        </div>
    </div>
`
export default {
  template,
  setup () {
    // 弹窗显示
    const windowStyle = reactive({
      transform: "scale(0)",
      opacity: 0,
    })

    // 动画
    const flag = ref(false)
    const bindShowSearchModule = () => {
      if (flag.value) {
        windowStyle.opacity = 0
        windowStyle.transform = "scale(0)"
        setTimeout(() => {
          flag.value = false
        }, 500)
      } else {
        flag.value = true
        setTimeout(() => {
          windowStyle.opacity = 1
          windowStyle.transform = "scale(1)"
        })
      }
    }

    return { flag, bindShowSearchModule, windowStyle }
  },
}
